<template>
  <!-- 理论 -->
  <div class="operationView">
    <navBar :title="true" />
    <div class="operation_content">
      <div class="operation_center">
        <div class="left_content">
          <div class="left_tips">
            <div>
              <span>请选择考场：</span>
              <div>
                <el-select
                  v-model="value"
                  placeholder="请选择考场"
                  @change="GetKcByidAsync()"
                >
                  <el-option
                    v-for="item in GetKc"
                    :key="item.id"
                    :label="
                      item.name +
                      '  ---  ' +
                      (item.status == '0' ? '未启用' : '已启用')
                    "
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div>
              <img src="../assets/theory/attention.png" alt="" />
              考试期间请遵守考试纪律,其他考生在考区等待叫号！
            </div>
          </div>
          <div class="left_info1">
            <div class="left_info">
              <div
                :class="{
                  daikao: item.zt == '0',
                  zaikao: item.zt == '1',
                  kongxian: item.zt == '2',
                }"
                v-for="(item, index) in GetStu"
                :key="index"
              >
                <div>
                  <div>{{ item.kth }}</div>
                  <span>
                    {{
                      item.zt == "0" ? "待考" : item.zt == "1" ? "在考" : "空闲"
                    }}</span
                  >
                </div>
                <div>
                  <div>{{ item.xm }}</div>
                  <span>{{ maskIdCard(item.sfzmhm) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_content">
          <div class="content_tips">
            <div>排队等候考生</div>
          </div>
          <div class="content_title">
            <span>姓名</span>
            <span>状态</span>
          </div>
          <div class="content_info">
            <div v-for="(item, index) in WaitStuQueenAsync" :key="index">
              <div>{{ item.xm }}（{{ maskIdCard(item.sfzmhm) }}）</div>
              <span>等待</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="shadow">
      <div class="shadow_content">
        <div>3号考台</div>
        <div>师德师风</div>
        <div>(***7890)</div> 
      </div>
    </div> -->
  </div>
</template>

<script>
import navBar from "../components/navBar.vue";
import $api from "../untils/api";
export default {
  data() {
    return {
      flag: true,
      WaitStuQueenAsync: [],
      GetStu: [
        // {
        //   kth: "1",
        //   zt: "0",
        //   xm: "111",
        //   sfzmhm: "212131313131333333333333",
        // },
      ],
      GetKc: [],
      KtData: [],
      value: "1号考场",
    };
  },
  components: {
    navBar,
  },
  created() {
    this.GetKcAsync();
    this.GetKcByidAsync();
  },
  methods: {
    maskIdCard(idCard) {
      if (idCard) {
        return "***" + idCard.slice(-4);
      }
    },

    GetKcAsync() {
      $api.GetKcAsync().then((res) => {
        console.log(res, "获取全部考场信息");
        if (res.data.httpStatus == "200") {
          this.GetKc = res.data.data;
        }
      });
    },
    GetKcByidAsync() {
      let inKcid;
      if (this.value == "1号考场") {
        inKcid = "1";
      }
      if (this.value == "2号考场") {
        inKcid = "2";
      }
      if (this.value == "3号考场") {
        inKcid = "3";
      }
      $api.GetKcByidAsync({ inKcid: inKcid }).then((res) => {
        console.log(res, "根据考场id获取考场信息");
        if (res.data.httpStatus == "200") {
          this.KtData = res.data.data;
        }
      });
      $api.GetStuAsync({ inKcid: inKcid }).then((res) => {
        console.log(res, "获取理论考场考台考生情况");
        if (res.data.httpStatus == "200") {
          this.GetStu = res.data.data;
        }
      });
      $api.GetWaitStuQueenAsync({ inKcid: inKcid }).then((res) => {
        console.log(res, "获取理论考场等候考生队列");

        if (res.data.httpStatus == "200") {
          this.WaitStuQueenAsync = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.operationView {
  width: 100%;
  height: 100vh; /* 使用100%的视口高度 */
  background-image: url(../assets/dpPicture/bgp.png);
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 不重复背景图 */
  background-size: cover; /* 背景图覆盖整个容器 */
  text-align: center;
  overflow: auto;
  position: relative;
  .operation_content {
    padding: 0 0.4rem 0 0.4rem;
    .operation_center {
      display: flex;
      justify-content: space-between;
      margin-top: 0.32rem;
      .left_content {
        width: 15.59rem;
        .left_tips {
          width: 100%;
          height: 0.72rem;
          background-color: #0d142b;
          color: #ff8f1f;
          font-size: 0.28rem;
          line-height: 0.72rem;
          text-align: center;
          margin-bottom: 0.26rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          div {
            & > div:nth-of-type(1) {
              background-image: url(../assets/dpPicture/navBgi.png);
              background-size: contain;
              background-repeat: no-repeat;
              ::v-deep .el-input__inner {
                border: none;
                background-color: rgba($color: #000000, $alpha: 0);
                color: #01c2ff;
              }
              ::v-deep .el-input__icon {
                line-height: 0;
              }
            }
          }

          div {
            display: flex;
            align-items: center;
          }
          img {
            margin: 0.4rem;
          }
        }
        .left_info1 {
          width: 15.59rem;
          height: 8.42rem;
          background-image: url(../assets/theory/car.png);
          background-size: contain;
          overflow: hidden;
          .left_info {
            width: 15.59rem;
            max-height: 9rem;
            // background-image: url(../assets/theory/car.png);
            // background-size: auto;
            // background-repeat: no-repeat;
            display: flex;
            // flex-direction: column;
            flex-wrap: wrap;
            animation: scrollAnimation 10s linear infinite;
            // overflow: hidden;

            margin-top: 30px;
            .zaikao {
              background-image: url(../assets/theory/zaikao.png);
              background-size: contain;
              background-repeat: no-repeat;
            }
            .daikao {
              background-image: url(../assets/theory/daikao.png);
              background-size: contain;
              background-repeat: no-repeat;
            }
            .kongxian {
              background-image: url(../assets/theory/kongxian.png);
              background-size: contain;
              background-repeat: no-repeat;
            }
            .jinyong {
              background-image: url(../assets/theory/jinyong.png);
              background-size: contain;
              background-repeat: no-repeat;
            }
            & > div {
              width: 2.8rem;
              height: 0.65rem;
              color: #ffffff;
              display: flex;
              margin: 0.15rem;
              & > div:nth-of-type(1) {
                width: 0.6rem;
                height: 0.6rem;
                & > div {
                  font-size: 0.25rem;
                  font-weight: bold;
                  text-align: center;
                }
                & > span {
                  font-size: 0.16rem;
                  font-weight: bold;
                  // margin-left: 5px;
                }
              }
              & > div:nth-of-type(2) {
                // width: 100%;
                padding: 0.2rem 0.2rem 0 0.2rem;
                display: flex;
                justify-content: space-between;
                font-weight: bold;
                font-size: 0.2rem;
              }
            }
          }
        }

        @keyframes scrollAnimation {
          0% {
            transform: translateY(0);
          }
          10% {
            transform: translateY(0);
          }
          20% {
            transform: translateY(-12.5%);
          }
          30% {
            transform: translateY(-25%);
          }
          40% {
            transform: translateY(-37.5%);
          }
          50% {
            transform: translateY(-50%);
          }
          60% {
            transform: translateY(-62.5%);
          }
          70% {
            transform: translateY(-75%);
          }
          80% {
            transform: translateY(-87.5%);
          }
          90% {
            transform: translateY(-100%);
          }
          100% {
            transform: translateY(-100%);
          }
        }
      }
      .right_content {
        width: 2.52rem;
        height: 9.4rem;
        .content_tips {
          width: 100%;
          height: 0.5rem;
          line-height: 0.5rem;
          display: flex;
          align-items: center;
          background-image: url(../assets/theory/bar.png);
          & > div {
            color: #ffffff;
            font-size: 0.24rem;
            margin: 0.3rem;
          }
        }
        .content_title {
          color: #ffffff;
          height: 0.6rem;
          align-items: center;
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
        }
        .content_info {
          width: 100%;
          height: 8.42rem;
          overflow: hidden;
          & > div {
            height: 0.55rem;
            padding: 0 0.1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-image: url(../assets/theory/houkao.png);
            background-size: contain;
            background-repeat: no-repeat;
            font-size: 0.2rem;
            margin-bottom: 13px;
            & > div {
              color: #ffffff;
            }
            & > span {
              color: #ff8f1f;
            }
          }
        }
      }
    }
  }
  .shadow {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    position: absolute;
    top: 0;
    left: 0;
    .shadow_content {
      width: 5.4rem;
      height: 2.98rem;
      background-image: url(../assets/theory/tanchuang.png);
      background-size: 100% 100%;
      margin: 20% auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      & > div:nth-of-type(1) {
        color: #00f1ff;
        font-weight: bolder;
        font-size: 0.4rem;
      }
      & > div:nth-of-type(2) {
        color: #ffffff;
        font-weight: bolder;
        font-size: 0.45rem;
      }
      & > div:nth-of-type(3) {
        color: #737f9c;
        font-weight: bolder;
        font-size: 0.4rem;
      }
    }
  }
}
</style>
